<template>
    <YvRow id="yv-home">
        <!-- 若雨 - Home -->
        <YvRow class="banner">
            <YvCol :sm="0" :span="40">
                <img width="100%" src="/Banner-reyour.png">
            </YvCol>
            <YvCol :sm="40" :span="0">
                <img width="100%" src="/Banner-reyour-mobile.png">
            </YvCol>
        </YvRow>
        <!-- <YvRow class="tools">
            <YvLine>工具</YvLine>
            <YvCol :sm="40" :span="10" v-for="item in toolsArr" class="toolsBox">
                <div class="toolsBody" @click="devLink(item.url)">
                    <img :src="item.icon" class="toolsIcon"/>
                    <span class="toolsText">{{ item.title }}</span>
                </div>
            </YvCol>
        </YvRow> -->
        <!-- module 开发 - dev -->
        <YvRow class="develop">
            <!-- dev 标题 -->
            <YvLine id="develop-title" pos="middle">
                委托开发
            </YvLine>
            <!-- dev 主体 -->
            <YvRow class="develop-body" align="center">
                <!-- dev 循环盒子 -->
                <YvCol class="develop-box" :span="8" :sm="18" v-for="(item, index) in devArray" :key="index">
                    <!-- dev 循环内卡片 -->
                    <YvCard @mouseenter="devMouseEnter(item.textArr, item.textId)"
                        @mouseleave="devMouseLeave(item.textId)" class="develop-card"
                        :style="{ background: item.background, color: item.front }">
                        <YvCol class="develop-img-body" :style="{ backgroundImage: `url(${item.icon})` }">
                        </YvCol>
                        <span class="develop-title">{{ item.title }}</span>
                        <YvBtn :color="item.front" :reverse="true" @click="devLink(item.router)">
                            了解详情
                        </YvBtn>
                        <span :id="item.textId" class="develop-text"></span>
                    </YvCard>
                </YvCol>
            </YvRow>
        </YvRow>
        <!-- module 游戏 -->
        <!-- BEIANTEST -->
        <YvRow class="game">
            <YvLine id="game-title" pos="start">
                游戏列表
            </YvLine>
            <gameList num="4"></gameList>
        </YvRow>
        <!-- module nomore - dev -->
        <YvRow class="inDevText" style="color: rgba(0,0, 0, .4);" align="center">
            正在持续开发中...
        </YvRow>
    </YvRow>
</template>

<script>
import devBackIcon from '@/assets/icons/dev/back.png'
import devFrontIcon from '@/assets/icons/dev/front.png'
import devMiniappIcon from '@/assets/icons/dev/miniapp.png'
import devAllIcon from '@/assets/icons/dev/all.png'
import devExeIcon from '@/assets/icons/dev/exe.png'
import gameList from '@/views/game/list.vue'

import musicPlayerIcon from '@/assets/icons/tools/musicPlayer.png'
import parseScaleIcon from '@/assets/icons/tools/parseScale.png'
import colorPaletteIcon from '@/assets/icons/tools/colorPalette.png'


export default {
    name: 'YvHome',
    components: {
        gameList
    },
    data() {
        return {
            intervalArr: [],
            inDevAnimation: [],
            devArray:
                [
                    {
                        title: '一站式开发',
                        router: '/develop',
                        background: '#28272807',
                        front: '#282728',
                        icon: devAllIcon,
                        textId: 'devAllText',
                        textArr: [
                            "完全自定义",
                            "一站式解决以下开发与部署",
                            "前端(浏览器)",
                            "后端(服务器)",
                            "桌面端(独立应用)",
                            "小程序(小程序)",
                        ]
                    },
                    {
                        title: '小程序开发',
                        router: '/develop/miniapp',
                        background: '#25DA6E07',
                        front: '#25DA6E',
                        icon: devMiniappIcon,
                        textId: 'devMiniappText',
                        textArr: [
                            "完全自定义",
                            "微信小程序原生开发",
                            "UNI-APP多端开发",
                        ]
                    },
                    {
                        title: '前端开发',
                        router: '/develop/front',
                        background: '#C33A3E07',
                        front: '#C33A3E',
                        icon: devFrontIcon,
                        textId: 'devFrontText',
                        textArr: [
                            "完全自定义",
                            "Vue.js 2.0/3.0",
                            "Java Web开发",
                            ".Net Framework/ Core开发",
                        ]
                    },
                    {
                        title: '后端开发',
                        router: '/develop/back',
                        background: '#087CFA07',
                        front: '#087CFA',
                        icon: devBackIcon,
                        textId: 'devBackText',
                        textArr: [
                            "完全自定义",
                            "Node.js",
                            "Java",
                            "C / C++",
                        ]
                    },
                    {
                        title: '桌面开发',
                        router: '/develop/exe',
                        background: '#FFD04A07',
                        front: '#FFD04A',
                        icon: devExeIcon,
                        textId: 'devExeText',
                        textArr: [
                            "完全自定义",
                            "Electron 网站转桌面应用",
                            "C# WPF/WinForm 单独应用",
                            "C++ QT 单独应用"
                        ]
                    },
                ],
            toolsArr: [
                {
                    title: '音乐',
                    url: '/tools/musicPlayer',
                    icon: musicPlayerIcon
                },
                {
                    title: 'AI',
                    url: '/tools/musicPlayer',
                    icon: musicPlayerIcon
                },
                {
                    title: '进制转换',
                    url: '/tools/parseScale',
                    icon: parseScaleIcon
                },
                {
                    title: '调色盘',
                    url: '/tools/colorPalette',
                    icon: colorPaletteIcon
                }
            ]
        }
    },
    created() {
        let str = `%c ___       __       ___       __       ___       __            ________      _______        ___    ___  ___      ___       ________       ___      _________    _______      
|\\  \\     |\\  \\    |\\  \\     |\\  \\    |\\  \\     |\\  \\         |\\   __  \\    |\\  ___ \\      |\\  \\  /  /||\\  \\    /  /|     |\\   ____\\     |\\  \\    |\\___   ___\\ |\\  ___ \\     
\\ \\  \\    \\ \\  \\   \\ \\  \\    \\ \\  \\   \\ \\  \\    \\ \\  \\        \\ \\  \\|\\  \\   \\ \\   __/|     \\ \\  \\/  / /\\ \\  \\  /  / /     \\ \\  \\___|_    \\ \\  \\   \\|___ \\  \\_| \\ \\   __/|    
 \\ \\  \\  __\\ \\  \\   \\ \\  \\  __\\ \\  \\   \\ \\  \\  __\\ \\  \\        \\ \\   _  _\\   \\ \\  \\_|/__    \\ \\    / /  \\ \\  \\/  / /       \\ \\_____  \\    \\ \\  \\       \\ \\  \\   \\ \\  \\_|/__  
  \\ \\  \\|\\__\\_\\  \\   \\ \\  \\|\\__\\_\\  \\   \\ \\  \\|\\__\\_\\  \\  ___   \\ \\  \\\\  \\|   \\ \\  \\_|\\ \\    \\/  /  /    \\ \\    / /   ___   \\|____|\\  \\    \\ \\  \\       \\ \\  \\   \\ \\  \\_|\\ \\ 
   \\ \\____________\\   \\ \\____________\\   \\ \\____________\\|\\__\\   \\ \\__\\\\ _\\    \\ \\_______\\ __/  / /       \\ \\__/ /   |\\__\\    ____\\_\\  \\    \\ \\__\\       \\ \\__\\   \\ \\_______\\
    \\|____________|    \\|____________|    \\|____________|\\|__|    \\|__|\\|__|    \\|_______||\\___/ /         \\|__|/    \\|__|   |\\_________\\    \\|__|        \\|__|    \\|_______|
                                                                                          \\|___|/                            \\|_________|                                    
                                                                                                                                                                             
                                                                                                                                                                             `
        console.log(str, 'background: rgba(255,0,0,.2); font-size: 10pt; color: blue;');

        const that = this;

        var titleInterval = setInterval(() => {
            that.devMouseEnter(["委托开发"], 'develop-title', 150)
        }, 5000);
        this.intervalArr.push(titleInterval);

    },
    beforeRouteUpdate() {
        console.log(this.intervalArr)
        for (var i = 0; i < this.intervalArr.length; i++) {
            clearInterval(this.intervalArr[i]);
        }
    },
    methods: {
        sleep(delay) { return new Promise((resolve) => setTimeout(resolve, delay)) },
        devLink(url) {
            this.$router.push(url)
        },
        // 开发委托 - dev - 鼠标进入
        async devMouseEnter(textArr, textId, ms = 30) {
            // 防止重复触发
            if (this.inDevAnimation.includes(textId) || this.inDevAnimation.includes(textId + "Leave"))
                return;
            // 添加进动画队列
            this.inDevAnimation.push(textId);
            let realText = '';
            // 循环写入文本
            for (var index = 0; index < textArr.length; index++) {
                for (var strlen = 0; strlen < textArr[index].length; strlen++) {
                    realText += textArr[index].charAt(strlen);
                    document.getElementById(textId).innerHTML = realText + " … ";
                    await this.sleep(ms);
                    if (this.inDevAnimation.includes(textId + "Leave")) {
                        return;
                    }
                }
                realText += '<br/>'
            }
            document.getElementById(textId).innerHTML = realText;
            // 移除动画队列
            this.inDevAnimation.splice(this.inDevAnimation.indexOf(textId), 1);
        },
        // 开发委托 - dev - 鼠标离开
        async devMouseLeave(textId, ms = 20) {
            // 防止重复触发 并停止动画
            if (this.inDevAnimation.includes(textId + "Leave")) {
                return;
            }
            this.inDevAnimation.splice(this.inDevAnimation.indexOf(textId), 1);
            this.inDevAnimation.push(textId + "Leave");
            // 循环删除文本
            let leaveText = document.getElementById(textId).innerHTML;
            for (var i = leaveText.length - 1; i >= 0; i--) {
                // 如果是br换行 删除整个标签 否则删除单个字符
                if (leaveText.charAt(i) == '>'
                    && leaveText.charAt(i - 1) == '/'
                    && leaveText.charAt(i - 2) == 'r'
                    && leaveText.charAt(i - 3) == 'b'
                    && leaveText.charAt(i - 4) == '<') {
                    leaveText = leaveText.substring(0, i - 4);
                    i -= 4;
                    continue;
                } else {
                    leaveText = leaveText.substring(0, i);
                }
                document.getElementById(textId).innerHTML = leaveText + " … ";
                await this.sleep(ms);
            }
            document.getElementById(textId).innerHTML = leaveText;
            // 移除动画队列
            this.inDevAnimation.splice(this.inDevAnimation.indexOf(textId + "Leave"), 1);
        }
    }
}
</script>

<style scoped>

.banner{
    border-radius: 0pt 0pt 6pt 6pt;
    overflow: hidden;
}

.develop-box {
    margin: 10pt auto;
    font-size: 10pt;
}

.develop-card {
    width: 68%;
    border-radius: 12pt;
    height: max-content;
}

.develop-card * {
    display: block;
    text-align: center;
    margin: 5pt auto;
}

.develop-img-body {
    width: 60%;
    height: 0;
    border-radius: 10pt;
    padding-bottom: 60%;
    background-size: 100%;
    /* background: red; */
}

.develop-text {
    line-height: 15pt;
}

.develop-body {
    align-items: start;
}

.game {
    margin-top: 12pt;
}

.toolsBody{
    border-radius: 20pt;
    border: 1pt solid var(--yv-main-color);
    border-top: 1pt solid var(--yv-main-color);
    margin: 0 auto;
    cursor: pointer;
}

.toolsBody:hover{
    background: var(--yv-filp-color);
}

.tools .toolsBody *{
    margin: 3pt auto;
    display: block;
    text-align: center;
}

.toolsIcon{
    width: 20%;
}
</style>